<!DOCTYPE html>
<html lang="en">
    <head>
        <title>LizardByte - Sunshine</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="Self-hosted game stream host for Moonlight." />
        <meta name="author" content="" />

        <!-- Open Graph/Twitter metadata -->
        <meta property="og:site_name" content="LizardByte" />
        <meta property="og:title" content="LizardByte | Sunshine" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://app.lizardbyte.dev/uno/github/openGraphImages/Sunshine_624x312.png" />
        <meta property="og:url" content="https://app.lizardbyte.dev/Sunshine" />
        <meta property="og:description" content="Self-hosted game stream host for Moonlight." />
        <meta property="og:locale" content="en-US" />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="og:twitter_site" content="@lizardbytedev" />
        <meta property="og:twitter_site:id" content="@lizardbytedev" />
        <meta property="og:twitter_creator" content="@lizardbytedev" />
        <meta property="og:twitter_creator:id" content="@lizardbytedev" />
        <meta property="twitter:image" content="https://app.lizardbyte.dev/uno/github/openGraphImages/Sunshine_624x312.png" />

        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="https://app.lizardbyte.dev/assets/images/favicon.ico" />
        <!-- FontAwesome-->
        <link href="https://app.lizardbyte.dev/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
        <!-- Bootstrap theme-->
        <link href="https://app.lizardbyte.dev/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
        <!-- Custom css-->
        <link href="https://app.lizardbyte.dev/css/custom.css" rel="stylesheet" />

        <script src="https://app.lizardbyte.dev/node_modules/jquery/dist/jquery.min.js"></script>
        <script src="https://app.lizardbyte.dev/node_modules/@popperjs/core/dist/umd/popper.min.js"></script>

        <!-- Crowdin widget -->
        <script src="https://app.lizardbyte.dev/js/crowdin.js"></script>
        <script src="https://app.lizardbyte.dev/js/crowdin_web_widget.js"></script>
    </head>
    <body class="d-flex flex-column h-100 bg-dark-gray">
        <main class="flex-shrink-0 overflow-hidden">
            <!-- Navigation-->
            <nav id="nav-container"></nav>

            <!-- Header-->
            <header class="bg-dark py-0">
                <section class="offset-anchor" id="Top">
                    <div id="carousel1" class="carousel slide carousel-fade" data-bs-ride="carousel"
                         style="height:50vh">
                      <!--Indicators-->
                      <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carousel1" data-bs-slide-to="0" class="active"
                                aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carousel1" data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carousel1" data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                      </div>
                      <!--/.Indicators-->
                      <!--Slides-->
                      <div class="carousel-inner" role="listbox">

                        <div class="carousel-item active">
                          <div class="view">
                            <img  src="assets/images/AdobeStock_305732536_1920x1280.jpg" alt="">
                            <div class="mask rgba-black-light"></div>
                          </div>
<!--                              <div class="carousel-caption">-->
<!--                                <h3 class="h3-responsive">1</h3>-->
<!--                                <p>First text</p>-->
<!--                              </div>-->
                        </div>
                        <div class="carousel-item">
                          <!--Mask color-->
                          <div class="view">
                            <img  src="assets/images/AdobeStock_231616343_1920x1280.jpg" alt="">
                            <div class="mask rgba-black-strong"></div>
                          </div>
<!--                              <div class="carousel-caption">-->
<!--                                <h3 class="h3-responsive">2</h3>-->
<!--                                <p>Secondary text</p>-->
<!--                              </div>-->
                        </div>
                        <div class="carousel-item">
                          <!--Mask color-->
                          <div class="view">
                            <img  src="assets/images/AdobeStock_303330124_1920x1280.jpg" alt="">
                            <div class="mask rgba-black-slight"></div>
                          </div>
<!--                              <div class="carousel-caption">-->
<!--                                <h3 class="h3-responsive">3</h3>-->
<!--                                <p>Third text</p>-->
<!--                              </div>-->
                        </div>
                      </div>
                      <!--/.Slides-->
                      <div>
                          <h1 class="carousel-overlay-title display-5 fw-bolder text-white mb-2">Sunshine</h1>
                          <p class="carousel-overlay-subtitle lead fw-bolder text-white-50 mb-4">
                              A LizardByte project</p>
                      </div>
                      <!--Controls-->
                      <button class="carousel-control-prev" type="button" data-bs-target="#carousel1"
                              data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                      </button>
                      <button class="carousel-control-next" type="button" data-bs-target="#carousel1"
                              data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                      </button>
                      <!--/.Controls-->
                    </div>
                </section>
            </header>

            <!-- About section-->
            <section class="offset-anchor py-5" id="About">
                <div class="container px-auto">
                    <p class="lead text-center text-white mx-auto mt-0 mb-5">
                        Sunshine is a self-hosted game stream host for Moonlight. Offering low latency, cloud gaming
                        server capabilities with support for AMD, Intel, and Nvidia GPUs for hardware encoding. Software
                        encoding is also available. You can connect to Sunshine from any Moonlight client on a variety
                        of devices. A web UI is provided to allow configuration, and client pairing, from your favorite
                        web browser. Pair from the local server or any mobile device.
                    </p>
                </div>
            </section>

            <!-- Features section-->
            <section class="offset-anchor bg-dark py-5" id="Features">
                <div class="container px-auto">
                    <h2 class="text-center text-white fw-bolder my-5">Features</h2>
                    <!-- Create a card for each feature -->
                    <div class="row gx-5">
                        <div class="col-md-6 col-lg-4 mb-5">
                            <div class="card bg-dark-gray text-white rounded-0">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center">
                                        <div class="icon text-white">
                                            <i class="fa-fw fa-2x fas fa-server"></i>
                                        </div>
                                        <div class="ms-3">
                                            <h5 class="fw-bolder mb-0">Self-hosted</h5>
                                            <p class="mb-0">
                                                Run Sunshine on your own hardware. No need to pay monthly fees to a
                                                cloud gaming provider.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 mb-5">
                            <div class="card bg-dark-gray text-white rounded-0">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center">
                                        <div class="icon text-white">
                                            <img height="40" src="https://moonlight-stream.org/images/moonlight.svg">
                                        </div>
                                        <div class="ms-3">
                                            <h5 class="fw-bolder mb-0">Moonlight Support</h5>
                                            <p class="mb-0">
                                                Connect to Sunshine from any Moonlight client. Moonlight is available
                                                for Windows, macOS, Linux, Android, iOS, Xbox, and more.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 mb-5">
                            <div class="card bg-dark-gray text-white rounded-0">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center">
                                        <div class="icon text-white">
                                            <i class="fa-fw fa-2x fas fa-microchip"></i>
                                        </div>
                                        <div class="ms-3">
                                            <h5 class="fw-bolder mb-0">Hardware Encoding</h5>
                                            <p class="mb-0">
                                                Sunshine supports AMD, Intel, and Nvidia GPUs for hardware encoding.
                                                Software encoding is also available.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
                            <div class="card bg-dark-gray text-white rounded-0">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center">
                                        <div class="icon text-white">
                                            <i class="fa-fw fa-2x fas fa-globe"></i>
                                        </div>
                                        <div class="ms-3">
                                            <h5 class="fw-bolder mb-0">Low Latency</h5>
                                            <p class="mb-0">
                                                Sunshine is designed to provide the lowest latency possible to achieve optimal gaming performance.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
                            <div class="card bg-dark-gray text-white rounded-0">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center">
                                        <div class="icon text-white">
                                            <i class="fa-fw fa-2x fas fa-gamepad"></i>
                                        </div>
                                        <div class="ms-3">
                                            <h5 class="fw-bolder mb-0">Control</h5>
                                            <p class="mb-0">
                                                Sunshine emulates an Xbox 360 or DS4 controller. Use nearly any
                                                controller on your Moonlight client!<br>
                                                <small>
                                                  <ul>
                                                    <li>DS4 emulation is only available on Windows.</li>
                                                    <li>Gamepad emulation is not currently supported on macOS.</li>
                                                  </ul>
                                                </small>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
                            <div class="card bg-dark-gray text-white rounded-0">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center">
                                        <div class="icon text-white">
                                            <i class="fa-fw fa-2x fas fa-gear"></i>
                                        </div>
                                        <div class="ms-3">
                                            <h5 class="fw-bolder mb-0">Configurable</h5>
                                            <p class="mb-0">
                                                Sunshine offers many configuration options to customize your experience.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- More cards -->
            <div class="container py-5 px-auto">
                <div class="container col-md-10">
                    <!-- Docs section -->
                    <section class="offset-anchor py-4" id="Docs">
                        <div class="card bg-dark text-white rounded-0">
                            <div class="card-body p-4">
                                <div class="d-flex align-items-center">
                                    <i class="fa-fw fa-2x fas fa-book"></i>
                                    <div class="ms-3">
                                        <h2 class="fw-bolder mb-0">Documentation</h2>
                                        <p class="mb-0">
                                            Read the documentation to learn how to install, use, and configure Sunshine.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer p-3 ms-3">
                                <a class="btn btn-outline-light me-3 mb-3" href="https://docs.lizardbyte.dev/projects/sunshine" target="_blank">
                                    <i class="fa-fw fas fa-book"></i>
                                    Read the Docs
                                </a>
                            </div>
                        </div>
                    </section>

                    <!-- Download section -->
                    <section class="offset-anchor py-4" id="Download">
                        <div class="card bg-dark text-white rounded-0">
                            <div class="card-body p-4">
                                <div class="d-flex align-items-center">
                                    <i class="fa-fw fa-2x fas fa-download"></i>
                                    <div class="ms-3">
                                        <h2 class="fw-bolder mb-0">Download</h2>
                                        <p class="mb-0">
                                            Download Sunshine for your platform.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer p-3 ms-3">
                                <a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/Sunshine/releases/latest" target="_blank">
                                    <i class="fa-fw fab fa-github"></i>
                                        Latest
                                </a>
                                <a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/Sunshine/releases/tag/nightly-dev" target="_blank">
                                    <i class="fa-fw fas fa-infinity"></i>
                                        Nightly
                                </a>
                                <a class="btn btn-outline-light me-3 mb-3" href="https://hub.docker.com/r/lizardbyte/sunshine" target="_blank">
                                    <i class="fa-fw fab fa-docker"></i>
                                        Docker
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <!-- Donate section -->
            <section class="offset-anchor bg-dark p-5" id="Donate">
                <div class="container mb-5 shadow border-0 bg-dark-gray rounded-0 col-md-7">
                    <div class="d-table-row g-0 text-white">
                        <div class="d-table-cell px-3 align-middle text-center">
                            <h1>
                                <i class="fa-fw fas fa-coins"></i>
                            </h1>
                        </div>
                        <div class="col-sm-auto border-white my-3 px-3 py-2 border-start">
                            <div class="container">
                                <h4 class="card-title mb-3 fw-bolder">Donate</h4>
                            </div>
                            <a
                                class="text-decoration-none"
                                href="https://github.com/sponsors/LizardByte"
                                target="_blank">
                                <img class="m-3"
                                     alt="GitHub Sponsors"
                                     src="https://img.shields.io/github/sponsors/lizardbyte?label=Github%20Sponsors&style=for-the-badge&color=green&logo=githubsponsors"
                                >
                            </a>
                            <a
                                class="text-decoration-none"
                                href="https://mee6.xyz/m/804382334370578482"
                                target="_blank">
                                <img class="m-3"
                                     alt="MEE6"
                                     src="https://img.shields.io/static/v1?style=for-the-badge&label=MEE6&message=Donate&color=green&logo="
                                >
                            </a>
                            <a
                                class="text-decoration-none"
                                href="https://www.patreon.com/LizardByte"
                                target="_blank">
                                <img class="m-3"
                                     alt="Patreon"
                                     src="https://img.shields.io/badge/dynamic/json?color=green&label=Patreon&style=for-the-badge&query=patron_count&url=https%3A%2F%2Fapp.lizardbyte.dev%2Funo%2Fpatreon%2FLizardByte.json&logo=patreon"
                                >
                            </a>
                            <a
                                class="text-decoration-none"
                                href="https://www.paypal.com/paypalme/ReenigneArcher"
                                target="_blank">
                                <img class="m-3"
                                     alt="PayPal"
                                     src="https://img.shields.io/static/v1?style=for-the-badge&label=PayPal&message=Donate&color=green&logo=paypal"
                                >
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Support -->
            <section class="offset-anchor bg-dark p-5" id="Support">
                <div class="col-md-7 mx-auto mb-5">
                    <div class="container shadow border-0 bg-primary rounded-0">
                        <div class="d-table-row g-0 text-white">
                            <div class="d-table-cell px-4 align-middle text-center">
                                <div class="fs-3 fw-bold text-white">Support Center</div>
                                <div class="text-white">Find answers and ask questions.</div>
                            </div>
                            <div class="col-sm-auto border-white my-3 px-4 py-2 border-start">
                                <p class="card-text">
                                    <em>The one who knows all the answers has not been asked all the questions.</em>
                                    – Confucius.
                                </p>
                                <div class="input-group mb-2">
                                    <a href="support">
                                        <button class="btn btn-outline-light rounded-0"
                                                id="button-support"
                                                type="button"
                                        >Support</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </main>
        <!-- Footer-->
        <footer class="bg-dark py-4 mt-auto" id="footer-container"></footer>

        <!-- Audio player bottom navbar -->
        <nav id="player-navbar"></nav>

        <!-- Bootstrap core JS-->
        <script src="https://app.lizardbyte.dev/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

        <!-- Get navbar -->
        <script src="https://app.lizardbyte.dev/js/navbar.js"></script>
        <!-- Get footer -->
        <script src="https://app.lizardbyte.dev/js/footer.js"></script>
        <!-- Discord WidgetBot -->
        <script src="https://app.lizardbyte.dev/js/discord.js"></script>
    </body>
</html>
